<template>
	<view class="all-main">
		<view class="main">
			<u-sticky>
				<view class="typeTab">
					<u-subsection :list="typeList" :current="current" mode="subsection" @change="typeChange"
						fontSize="14"></u-subsection>
				</view>
				<view class="total">
					<view class="totals">
						<text>统计：</text>
						<text class="nums">{{total}}</text>
					</view>
					<view class="search" @click="screen_show = true">
						<u-icon name="list-dot" size="22" color="#2979ff"></u-icon>
						<text>筛选</text>
					</view>
				</view>
			</u-sticky>
			<view v-if="lists.length > 0" class="lists">
				<view v-for="(item, index) in lists" :key="index" class="items">
					<view class="sn">
						<text>{{item.sn}}</text>
						<text class="sn-txt">【{{item.product}}】</text>
					</view>
					<view class="items-views start-time">
						<view class="lefts">
							<text v-if="type == 1">绑定时间</text>
							<text v-else>入库时间</text>
						</view>
						<view class="rights">
							<text>{{item.start_time}}</text>
						</view>
					</view>
					<view class="items-views end-time">
						<view class="lefts">
							<text>到期时间</text>
						</view>
						<view class="rights">
							<text>{{item.end_time}}</text>
						</view>
					</view>
					<view class="items-views deduct-money">
						<view class="lefts">
							<text>扣款金额</text>
						</view>
						<view class="rights">
							<text>{{item.deduct_money}}</text>
						</view>
					</view>
					<view class="items-views state">
						<view class="lefts">
							<text>状态</text>
						</view>
						<view class="rights">
							<u-tag v-if="item.is_operation == 1" text="待操作" type="warning"></u-tag>
							<u-tag v-else-if="item.is_operation == 2" text="已扣款" type="success"></u-tag>
							<u-tag v-else text="扣款失败" type="error"></u-tag>
						</view>
					</view>
					<view v-if="item.is_operation == 2" class="items-views deduct-time">
						<view class="lefts">
							<text>扣款时间</text>
						</view>
						<view class="rights">
							<text>{{item.operation_time}}</text>
						</view>
					</view>
					<view v-if="item.is_operation == 3" class="items-views deduct-error-msg">
						<view class="lefts">
							<text>失败原因</text>
						</view>
						<view class="rights">
							<text>{{item.operation_msg}}</text>
						</view>
					</view>
				</view>
			</view>
			<u-empty v-else mode="list" icon="/static/Empty/data_null.png">
			</u-empty>
			<u-popup :show="screen_show" @close="screen_show = false" mode="top">
				<view>
					<view class="screen_box">
						<text>产品</text>
						<view class="screen_option">
							<text @click="productShow = true">{{product_txt}}</text>
						</view>
						<text>SN</text>
						<view class="screen_option">
							<u--input placeholder="请输入SN" border="surround" v-model="sn"></u--input>
						</view>
					</view>
					<view class="btn">
						<text @click="searchConfirm">确认</text>
					</view>
				</view>
			</u-popup>
			<u-picker :show="productShow" :columns="productList" keyName="title" @confirm="proConfirm"
				@cancel="productShow = false"></u-picker>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				typeList: ['伪激活', '未激活'],
				current: 0,
				type: 1,
				total: 0,
				sn: '',
				lists: [],
				page: 1,
				page_size: 10,
				bottom: true,
				screen_show: false,
				productShow: false,
				productList: [],
				product_id: 0,
				product_txt: '请选择产品',
			}
		},
		onLoad() {
			this.getProductList()
			this.loadData()
		},
		//上拉加载
		onReachBottom() {
			if (this.bottom == true) {
				this.page += 1
				this.loadData()
			}
		},
		methods: {
			// 加载产品
			async getProductList() {
				const {
					data: res
				} = await this.$myHttp({
					url: 'Setting/getProductAllocationCount'
				});
				if (res.code == 200) {
					this.productList = [res.data]
				}
			},
			// 加载数据
			async loadData() {
				uni.showLoading({
					title: '加载中'
				});
				const {
					data: res
				} = await this.$myHttp({
					url: 'active/getFakeActiveData',
					data: {
						type: this.type,
						page: this.page,
						page_size: this.page_size,
						product_id: this.product_id,
						sn: this.sn
					}
				});
				uni.hideLoading()
				if (res.code == 200) {
					this.total = res.data.total
					if (res.data.data !== undefined && res.data.data !== null && res.data.data.length > 0) {
						if (this.page == 1) {
							this.lists = res.data.data
						} else {
							this.lists = [...this.lists, ...res.data.data]
						}
					} else {
						this.bottom = false
					}
				}
			},
			// 类型切换
			typeChange(e) {
				this.current = e
				if (this.type != (e + 1)) {
					this.type = e + 1
					this.bottom = true
					this.lists = []
					this.page = 1
					this.loadData()
				}
			},
			// 搜索
			searchConfirm() {
				this.page = 1
				this.bottom = true
				this.lists = []
				this.loadData()
				this.screen_show = false
			},
			// 选择产品
			proConfirm(e) {
				this.product_id = e.value[0].id
				this.product_txt = e.value[0].title
				this.productShow = false
			}
		}
	}
</script>

<style lang="scss">
	.all-main {
		.main {
			.typeTab {
				padding: 30rpx;
				background-color: #F2F6FC;
			}

			.total {
				padding: 0 30rpx 20rpx 30rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 28rpx;
				background-color: #F2F6FC;
				margin-bottom: 10rpx;

				.totals {

					.nums {
						color: #fa3534;
					}
				}

				.search {
					display: flex;
					align-items: flex-end;
					color: #2979ff;
				}
			}

			.lists {
				margin: 0 30rpx;

				.items {
					padding: 0 30rpx;
					border-radius: 10rpx;
					background-color: #ffffff;
					margin-bottom: 30rpx;
					font-size: 28rpx;
					box-shadow: 0px 0px 20px -12px #342f2f;

					.items-views {
						display: flex;
						justify-content: space-between;
						align-items: center;
						padding: 20rpx 0;
						border-bottom: 1px dashed #F2F6FC;

						.rights {
							color: #909399;
						}
					}

					.sn {
						padding: 20rpx 0;
						font-size: 32rpx;
						font-weight: bold;
						border-bottom: 1px solid #F2F6FC;

						.sn-txt {
							font-weight: initial;
							font-size: 28rpx;
							color: #909399;
						}
					}

					.deduct-money {

						.rights {
							color: #fa3534;
							font-size: 32rpx;
						}
					}
				}
			}

			.screen_box {
				padding: 30rpx 50rpx;
				box-sizing: border-box;

				.screen_option {
					display: flex;
					flex-wrap: wrap;
					align-items: center;
					// justify-content: space-between;
					margin: 30rpx 0;

					text {
						background-color: #eee;
						border: #eee 1px solid;
						padding: 10rpx 20rpx;
						color: #333;
						border-radius: 15rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						margin: 0 5rpx 30rpx 5rpx;
					}

					text.on {
						background-color: #eee;
						border: #55aaff 1px solid;
						padding: 10rpx 20rpx;
						color: #55aaff;
						border-radius: 15rpx;
						display: flex;
						align-items: center;
						justify-content: center;
					}

					.datetime {
						margin: 0;
					}
				}
			}

			.btn {
				display: flex;
				align-items: center;
				justify-content: center;

				text {
					width: 100%;
					padding: 30rpx 0;
					text-align: center;
					background-color: #55aaff;
					color: #fff;
				}
			}
		}
	}
</style>